<script setup lang='ts'>

import{ getHistoryListService, deleteHistoryService } from '@/api/history'
import type { FormInstance, FormRules } from 'element-plus'

//控制用户详细，编辑，删除弹窗
const dialogVisible = ref(false)

//控制删除确认弹窗
const deleteDialogVisible = ref(false)

//控制弹窗标题
const dialogTitle = ref('')

//控制弹窗input能否输入
const inputDisabled = ref(true)

//控制最后确定按钮是否可用
const submitDisabled = ref(true)

interface RuleForm {
    id: number
    uid: string
    actionTime: string
    action: string
    result: string
    birdUrl: string
}

//定义模型，用于用户信息详细展示
const historyRecordModel = ref({
    id: 0,
    uid: '',
    actionTime: '',
    action: '',
    result: '',
    birdUrl: '',
})

//设置表单校验规则
const rules = reactive<FormRules<RuleForm>>({
    
})

//调用后台接口获取用户列表
const getHistoryList = async () => {

    let result = await getHistoryListService()
    console.log(result)
    tableData.value = result.data

}
getHistoryList();

// const handleClick = () => {
//     console.log('click')
// }

//数据拷贝
//由于多处需要用到数据拷贝，所以写一个函数
const copyData = (row) => {
    //数据拷贝
    historyRecordModel.value.id = row.id;
    historyRecordModel.value.uid = row.uid;
    historyRecordModel.value.actionTime = row.actionTime;
    historyRecordModel.value.action = row.action;
    historyRecordModel.value.result = row.result;
    historyRecordModel.value.birdUrl = row.birdUrl;

}

//展示用户信息详细弹窗
const showDetailDialog = (row) => {
    dialogVisible.value = true;
    dialogTitle.value = '历史记录信息';
    inputDisabled.value = true;
    submitDisabled.value = true;

    //数据拷贝
    copyData(row)

}

//展示编辑用户信息弹窗
// const showEditDialog = (row) => {
    
//     dialogVisible.value = true;
//     dialogTitle.value = '编辑信息';
//     inputDisabled.value = false;
//     submitDisabled.value = false;

//     //数据拷贝
//     copyData(row)

// }

//展示删除用户信息弹窗
const showDeleteDialog = (row) => {

    dialogVisible.value = true;
    dialogTitle.value = '删除历史记录';
    inputDisabled.value = true;
    submitDisabled.value = false;

    //数据拷贝
    copyData(row)

}

//因为确定又分为编辑用户和删除用户，所调用的函数不同，所以写一个提交函数来做判断
const submit = () => {

    if(dialogTitle.value == '删除历史记录'){
        //弹出删除确认弹窗
        deleteDialogVisible.value = true;
    }else{
        ElMessage.error('dialogTitle不在允许范围内')
    }

}

//另外设置一个模型用于用户信息修改，因为有的展示出来的数据不需要传递给后台进行修改
// const userInfoChangeModel = ref({
//     uid: '',
//     nickname: '',
//     phoneNumber: '',
//     userType: '',
//     introduction: '',
//     gender: '',
// })

//调用后台接口更新用户信息
// const updateUserInfo = async () => {

//     //数据拷贝从userInfoModel拷贝到userInfoChangeModel
//     userInfoChangeModel.value.uid = userInfoModel.value.uid;
//     userInfoChangeModel.value.nickname = userInfoModel.value.nickname;
//     userInfoChangeModel.value.phoneNumber = userInfoModel.value.phoneNumber;
//     userInfoChangeModel.value.userType = userInfoModel.value.userType;
//     userInfoChangeModel.value.introduction = userInfoModel.value.introduction;
//     userInfoChangeModel.value.gender = userInfoModel.value.gender;

//     let result = await updateUserInfoService(userInfoChangeModel.value)
//     console.log(result)
//     dialogVisible.value = false;
//     getUserList();

// }

//调用后台接口删除用户信息
const deleteHistoryInfo = async () => {

    let result = await deleteHistoryService(historyRecordModel.value.uid, historyRecordModel.value.id)
    console.log(result)
    dialogVisible.value = false;
    deleteDialogVisible.value = false;
    getHistoryList();

}

const tableData = ref([
    {
        id: 0,
        uid: '1',
        actionTime: '1',
        action: '1',
        result: '1',
        birdUrl: '1',
    }
])

</script>

<template>
    <div class="container">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="Id" width="60" />
            <el-table-column prop="uid" label="UID" width="120" />
            <el-table-column prop="actionTime" label="ActionTime" width="120" />
            <el-table-column prop="action" label="Action" width="120" />
            <el-table-column prop="result" label="Result" width="120" />
            <el-table-column prop="birdUrl" label="BirdUrl" width="120" />
            <el-table-column fixed="right" label="Operations" width="120">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="showDetailDialog(row)">详细</el-button>
                    <!-- <el-button link type="primary" size="small" @click="showEditDialog(row)">编辑</el-button> -->
                    <el-button link type="primary" size="small" @click="showDeleteDialog(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 详细，编辑，删除弹窗 -->
        <el-dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
            <el-form :model="historyRecordModel" :rules="rules">
                <el-form-item label="Id" prop="id">
                    <el-input v-model="historyRecordModel.id" placeholder="historyRecordModel.id" :disabled="inputDisabled"/>
                </el-form-item>
                <el-form-item label="UID" prop="uid">
                    <el-input v-model="historyRecordModel.uid" placeholder="historyRecordModel.uid" :disabled="inputDisabled"/>
                </el-form-item>
                <el-form-item label="ActionTime" prop="actionTime">
                    <el-input v-model="historyRecordModel.actionTime" placeholder="historyRecordModel.actionTime" :disabled="inputDisabled"/>
                </el-form-item>
                <el-form-item label="Action" prop="action">
                    <el-input v-model="historyRecordModel.action" placeholder="historyRecordModel.actionr" :disabled="inputDisabled"/>
                </el-form-item>
                <el-form-item label="Result" prop="result">
                    <el-input v-model="historyRecordModel.result" placeholder="historyRecordModel.result" :disabled="inputDisabled"/>
                </el-form-item>
                <el-form-item label="BirdUrl" prop="birdUrl">
                    <el-input v-model="historyRecordModel.birdUrl" placeholder="historyRecordModel.birdUrl" disabled/>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" 
                    @click="submit" 
                    :disabled="submitDisabled"
                    >
                    确定
                    </el-button>
                    <el-button type="primary" @click="dialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 删除操作确认弹窗 -->
        <el-dialog title="提示" v-model="deleteDialogVisible" width="30%">
            <span>确定删除该历史记录吗？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="deleteHistoryInfo">确定</el-button>
                    <el-button type="primary" @click="deleteDialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    margin: 10px;
    padding: 10px;
}
</style>